<script setup lang="ts">
import VChart from 'vue-echarts'
import { computed } from 'vue'
import type { AdData } from '../types/ad'

const props = defineProps<{
  title: string
  data: AdData[]
  loading?: boolean
}>()

const option = computed(() => ({
  title: {
    text: props.title,
    left: 'center',
    textStyle: {
      color: '#333',
      fontSize: 16,
      fontWeight: 'bold'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (params) => {
      return `${params[0].axisValue}<br/>
      ${params[0].marker} ${params[0].seriesName}: ${params[0].data}`
    }
  },
  grid: {
    top: '15%',
    right: '3%',
    left: '3%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: props.data.map(item => item.date),
    axisLine: {
      lineStyle: {
        color: '#eee'
      }
    },
    axisLabel: {
      color: '#666'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#eee'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#f5f5f5'
      }
    },
    axisLabel: {
      color: '#666'
    }
  },
  series: [{
    name: props.title,
    data: props.data.map(item => item.value),
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 8,
    animation: true,
    animationDuration: 2000,
    animationEasing: 'elasticOut',
    lineStyle: {
      width: 3,
      color: '#3a4de9'
    },
    itemStyle: {
      color: '#3a4de9',
      borderColor: '#fff',
      borderWidth: 2
    },
    emphasis: {
      scale: true,
      itemStyle: {
        color: '#ff7d00',
        borderColor: '#fff',
        borderWidth: 2
      }
    },
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(58, 77, 233, 0.5)'
        }, {
          offset: 1,
          color: 'rgba(58, 77, 233, 0.1)'
        }]
      }
    }
  }]
}))
</script>

<template>
  <div class="chart-container">
    <VChart 
      :option="option" 
      autoresize
      :loading="loading"
      style="height: 100%; width: 100%"
    />
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
  </div>
</template>

<style scoped>
.chart-container {
  position: relative;
  min-height: 400px;
  height: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  padding: 16px;
  transition: transform 0.2s;
}

.chart-container:hover {
  transform: translateY(-2px);
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3a4de9;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
